<script setup>
import HeaderBar from '@/components/HeaderBar/index.vue'
import SetForm from './components/change-password/SetForm.vue'
import EmailForm from './components/change-password/EmailForm.vue'
import AccountForm from './components/change-password/AccountForm.vue'
import { useUserStore } from '@/store/user'
import { storeToRefs } from 'pinia'
import { _t18 } from '@/utils/public'
import { useToast } from '@/hook/useToast'

const { _toast } = useToast()
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)

// 修改登录密码方式(true 普通，false 邮箱)
const updateLoginPwdMethod = ref(true)
// 是否已有登录密码
const loginPassword = ref(userInfo.value.user?.loginPassword || '')
// 导航栏右侧按钮
const cuttentRight = { iconRight: [{ iconName: 'kefu', clickTo: 'event_serviceChange' }] }

const notPwd = ref(false)

const changeMethod = () => {
  if (!userInfo.value.user?.email) {
    return _toast('please_bind_email')
  }
  updateLoginPwdMethod.value = !updateLoginPwdMethod.value
}
</script>

<template>
  <div>
    <!-- 导航条 -->
    <HeaderBar
      :currentName="notPwd ? _t18('sidebar_loginPwd', ['bitmake']) : _t18('password_set')"
      :cuttentRight="cuttentRight"
      :border_bottom="true"
    ></HeaderBar>

    <!-- 添加登录密码 -->
    <SetForm v-if="!loginPassword && updateLoginPwdMethod"></SetForm>

    <!-- 修改登录密码 -->
    <AccountForm v-if="loginPassword && updateLoginPwdMethod"></AccountForm>

    <!-- 邮箱修改密码 -->
    <EmailForm v-if="loginPassword && !updateLoginPwdMethod"></EmailForm>

    <!-- 切换方式 -->
    <div class="box" v-if="loginPassword">
      <div
        class="set"
        @click="changeMethod"
        v-if="!updateLoginPwdMethod"
      >
        {{ _t18('password_update_pwd') }}
      </div>
      <div
        class="set"
        @click="changeMethod"
        v-else
      >
        {{ _t18('password_update_email') }}
      </div>
    </div>
  </div>
</template>

<style lang="scss">
/* ================== 保留原样 ================== */
.box {
  padding: 0 15px;
  .set {
    margin-top: 20px;
    text-align: left;
    font-size: 14px;
    color: var(--ex-font-color9);
  }
}

/* ================== 强制覆盖 Vant 的输入框 ================== */
/* ✅ 核心：白底 + 半圆横条 + 无红线 */
.van-cell.van-field,
.van-field,
.password-input {
  background-color: #fff !important; /* 白底 */
  border-radius: 25px !important; /* 半圆横条 */
  border: none !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) !important; /* 柔和浅灰边 */
  padding: 0 12px !important;
  margin-bottom: 14px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  transition: box-shadow 0.2s;
}

/* ✅ 聚焦时边框阴影加深 */
.van-field:focus-within,
.van-cell.van-field:focus-within,
.password-input:focus-within {
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.25) !important;
}

/* ✅ 输入内容样式 */
.van-field__control,
.password-input input {
  border: none !important;
  background: transparent !important;
  font-size: 14px !important;
  color: #333 !important;
  outline: none !important;
}

/* ✅ 图标样式 */
.van-field__left-icon,
.van-field__right-icon,
.password-input .icon-left,
.password-input .icon-right {
  opacity: 0.8 !important;
  width: 18px !important;
  height: 18px !important;
}

/* ✅ 移除 Vant 默认底部分割线 */
.van-cell::after {
  display: none !important;
}
</style>
